<template>
<l-layout >
    <l-panel>
        <template #toolLeft >
            <div class="l-panel--item" >
                <el-radio-group v-model="categoryId" :disabled="tableLoading" size="mini" @change="handleCaregoryChange" >
                    <el-radio-button label="1">登录</el-radio-button>
                    <el-radio-button label="2">访问</el-radio-button>
                    <el-radio-button label="3">操作</el-radio-button>
                    <el-radio-button label="4">异常</el-radio-button>
                </el-radio-group>
            </div>
            <div class="l-panel--item" style="width:240px;" >
                <el-date-picker
                    v-model="operateTime"
                    size="mini"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    
                    @change="handleDateChange"
                    >
                </el-date-picker>
            </div>
            
            <div class="l-panel--item" >
                <el-input :placeholder="$t('请输入IP/功能/类型')" v-model="keyWord" size="mini" @keyup.enter.native="hanleSearch" >
                    <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                </el-input>
            </div>
        </template>
        <template #toolRight >
            <l-tool-btns :hasAdd="false" >
                <l-excel-btns></l-excel-btns>
                <el-button-group v-if="lr_hasPageAuth('Clear','buttons')">
                    <el-button type="danger" size="mini" icon="el-icon-delete"
                        @click="handleOpenForm()"
                    >清空</el-button>
                </el-button-group>
            </l-tool-btns>
        </template>
        <l-table 
            :loading="tableLoading"
            :columns="lr_getPageColumns(columns)" 
            :dataSource="tableData" 
            row-key="f_Id"
            :isPage="true"
            :pageTotal="tableTotal"
            :tablePage.sync="tableCurrentPage"

            @loadPageData="turnTablePage"
             >
            <template v-slot:f_OperateTime="scope" >
                {{lr_dateFormat(scope.row.f_OperateTime)}}
            </template>
            <template v-slot:f_Category="scope" >
                {{lr_dataItemDetailsName('FormSort',scope.row.f_Category)}}
            </template>
             <template v-slot:f_ExecuteResult="scope" >
                <el-tag v-if="scope.row.f_ExecuteResult == 1" size="mini" type="success">成功</el-tag>
                <el-tag v-else size="mini" type="danger">失败</el-tag>
            </template>
        </l-table>
    </l-panel>

    <l-dialog
        :title="$t('清空')"
        :visible.sync="formVisible"

        @ok="handleDelete"
        width="400px"
        :height="160"
        >
        <div class="l-from-body" > 
            <el-form size="mini" ref="form" label-width="80px"  >
               <el-form-item label="时间" >
                     <l-select
                        v-model="keepTime"
                        placeholder="请选择保留时间" 
                        size="mini"
                        :options="optionsDate" 
                        >
                    </l-select>
                </el-form-item>
            </el-form>
        </div>
    </l-dialog>
</l-layout>
</template>

<script>
const api = window.$api.system.log
export default {
    data () {
        return {
            lr_isPage:true,

            categoryId:'1',
            operateTime:null,
            pickerOptions: {
            shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近一个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit('pick', [start, end]);
                }
            }, {
                text: '最近三个月',
                onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit('pick', [start, end]);
                }
            }]
            },

            // 表格
            columns: [
                {label:'时间',prop:'f_OperateTime',width:'160'},
                {label:'用户',prop:'f_OperateAccount',width:'80',align:'center'},
                {label:'IP',prop:'f_IPAddress',width:'100'},
                {label:'功能',prop:'f_Module',width:'200'},
                {label:'类型',prop:'f_OperateType',width:'64',align:'center'},
                {label:'结果',prop:'f_ExecuteResult',width:'64',align:'center'},
                {label:'描述',prop:'f_ExecuteResultJson',minWidth:'150'},
            ],
            tableLoading:false,
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,
            tableData: [],
            keyWord:'',

            optionsDate:[
                {value:'7',label:'保留近一周'},
                {value:'1',label:'保留近一个月'},
                {value:'3',label:'保留近三个月'},
                {value:'0',label:'不保留，全部删除'}
            ],
            formVisible:false,
            keepTime:'7'
        };
    },
    computed:{
        
    },
    mounted () {
        this.loadTablePageData()
    },
    methods:{
        async loadTablePageData(isNotFirst){
            if(!isNotFirst){
                this.tableCurrentPage = 1;
            }
            this.tableLoading = true;
            let queryData = {
                rows:this.tablePageSize,
                page:this.tableCurrentPage,
                sidx:'F_OperateTime DESC',
                categoryId:this.categoryId,
                keyword:this.keyWord,
                startTime:this.operateTime?this.operateTime[0]:null,
                endTime:this.operateTime?this.operateTime[1]:null,
            }
            const data = await this.$awaitWraper(api.getPage(queryData))
            
            if(data){
                this.tableData = data.rows
                this.tableTotal = data.records
            }
            else{
                this.tableData = []
                this.tableTotal = 0
            }
            this.tableLoading = false
        },
        turnTablePage({rows}){
            this.tablePageSize = rows;
            this.loadTablePageData(true);
        },
        handleCaregoryChange(){
            this.loadTablePageData();
        },
        handleDateChange(){
            this.loadTablePageData();
        },
        hanleSearch(){
            this.loadTablePageData();
        },
        handleOpenForm() {
            this.formVisible = true;
        },
        handleDelete(showLoading,hideLoading){
            showLoading('清空日志数据中...');
            api.remove(this.categoryId,this.keepTime || '0').then(()=>{
                this.$message({
                    type: 'success',
                    message: '清空成功!'
                });
                this.formVisible = false;
                this.loadTablePageData();
                hideLoading();
            }).catch(()=>{
                this.formVisible = false;
                hideLoading();
            })

        },
        handleCloseForm(){
            this.keepTime = '7';
        }
    }
}
</script>